<template>
	<view class="shop" style="height: 100%;">
		<view class="ot">
		</view>
		<view class="tabs">
			<view :class="current==item.id?'active':'tab'" v-for="(item,index) in tabs" :key="index"
				@click="chooseTab(item)">
				{{item.name}}
				<view class="border" v-if="current==item.id">

				</view>
			</view>
		</view>
		<view class="list" style="position: relative;z-index: 99;">
			<view style="display: flex;justify-content: center;align-items: center;width: 100%;" v-if="list.length==0">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="无商品数据">
				</u-empty>
			</view>
			<view class="item" v-for="item in list" :key="item.id" @click="nav(item)">
				<image :src="'http://ba.fuliaoxx.com'+item.image" mode=""></image>
				<view class=""
					style="margin: 10rpx 0;font-weight: 600;font-size: 26rpx;text-align: left;width: 90%;color: #181818;">
					{{item.name}}
				</view>
				<view class=""
					style="color: #FC3F05;font-size: 26rpx;display: flex;justify-content: space-between;width: 90%;align-items: center;font-weight: 600;">
					￥{{item.price}}
					<view class="" style="color: #6A6A6A;font-size: 24rpx;font-weight: 400;">
						<text></text>
					</view>
				</view>
			</view>
			<view class="" style="width: 44%;" v-if="list.length !=0">

			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUsedType,
		getUsed
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				current: 1,
				tabs: [{
					id: 1,
					name: "雅迪"
				}, {
					id: 2,
					name: "艾玛"
				}, {
					id: 3,
					name: '小刀'
				}],
				list: [],
			}
		},
		onShow() {
			this.getList();
		},
		onLoad(opt) {
			getUsedType().then(res => {
				this.tabs = res.data
				this.current = this.tabs[0].id;
			})
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: function(res) {
			// 		let location = {
			// 			lat: res.latitude,
			// 			lng: res.longitude
			// 		}
			// 		uni.setStorageSync("location", location)
			// 	},
			// 	fail: function(res) {
			// 		uni.showToast({
			// 			title: "获取当前定位失败",
			// 			icon: "none"
			// 		})
			// 	}
			// });
			console.log('opt', opt)
			if (opt.scene) {
				uni.setStorageSync('salt', opt.scene)
			}
			// getType().then(res => {
			// 	this.tabs = res.data;
			// 	this.current = this.tabs[0].id;
			// 	this.getAllList();
			// 	this.getList();
			// })
		},

		methods: {
			chooseTab(item) {
				if (this.current == item.id) return;
				this.current = item.id;
				this.getList()
			},
			getAllList() {
				// getProductList().then(res => {
				// 	this.allGoods = res.data.filter(item => item.type == '2');
				// })
			},
			getList() {
				this.list = [];
				getUsed({
					usedtype_id: this.current
				}).then(res => {
					this.list = res.data.filter(item => item.status == '1');
				})
			},
			nav(item) {
				console.log(item)
				uni.navigateTo({
					url: "/pagesA/goodsDetail/goodsDetail2?item=" + JSON.stringify(item)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.ot {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 400rpx;
		background-color: #75D65E;
		background: linear-gradient(to bottom, #75D65E, #f8f8f8);

	}

	.list {
		overflow: auto;
		height: calc(100% - 75rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0;
		justify-content: space-evenly;

		.item {
			width: 44%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: white;
			height: 510rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 400rpx;
			}
		}
	}

	.tabs {
		background-color: white;
		position: relative;
		z-index: 1;
		display: flex;
		overflow-x: auto;

		.tab,
		.active {
			width: 16.6vw;
			min-width: 16.6vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 24rpx 10rpx;
			font-weight: 600;
			color: #48484A;
			font-size: 26rpx;
			position: relative;

			.border {
				width: 50rpx;
				height: 10rpx;
				background: linear-gradient(to right, #75D65E, #75D65E, #ffffff);
				border-radius: 100px 0 100px 0;
				position: absolute;
				bottom: 10rpx;
			}
		}

		.active {
			background-color: rgba(115, 249, 85, 0.2);
			color: #1B1B1B;
			font-size: 30rpx;
		}
	}

	.yh-box {
		background-color: white;
		margin: 20rpx;
		border-radius: 30rpx;
		padding: 30rpx;
		position: relative;
		z-index: 1;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #75D65E;
			font-size: 26rpx;
			margin-bottom: 20rpx;

			image {
				width: 120rpx;
				height: 30rpx;
			}
		}

		.items {
			display: flex;
			// justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 30rpx;
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>